<template>
  <div class="re">
    <div class="re1">
      <img src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
      <span class="re2">本周人们榜单</span>
      <span class="re3">全部榜单></span>
    </div>
    <div class="re4">
      <ul>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1607/c3/c3dae954f5da5a20a3.water.jpg_250x250_84eea80c.jpg" alt="" class="re6">
          <div class="re7">石家庄海悦天地海洋公园</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
          <div class="re10"><img src="https://imgs.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png" alt=""></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/201401/24/31ff4b10840a897d729e69068078d850.jpg_250x250_861cbac1.jpg" alt="" class="re6">
          <div class="re7">赵州桥</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
          <div class="re10"><img src="https://imgs.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png" alt=""></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1412/13/55207b20b5b86bc5c5dbd62d4eba53b1.water.jpg_250x250_4c15e9cc.jpg" alt="" class="re6">
          <div class="re7">苍岩山</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
          <div class="re10"><img src="https://imgs.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png" alt=""></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1904/3e/3e12a1e0e90f5cda3.water.jpg_250x250_049d1ebe.jpg" alt="" class="re6">
          <div class="re7">了了汗蒸时代</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/201304/17/f3b5735b997d5059c8d65eac.jpg_250x250_26571ec4.jpg" alt="" class="re6">
          <div class="re7">石家庄动物园</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p95/201211/03/30f3d57d7f4d4e4a93835fbb.jpg_250x250_303e8c30.jpg" alt="" class="re6">
          <div class="re7">石家庄抱犊寨</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1505/cc/ccc5641ce648ed4e.water.jpg_250x250_fe52a44c.jpg" alt="" class="re6">
          <div class="re7">大浪淘沙假日酒店</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1701/7d/7dc4aec006b570dba3.img.jpg_250x250_10fbf6e6.jpg" alt="" class="re6">
          <div class="re7">西部长青旅游度假区</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1411/1a/f53c0729e642e511dab5396e443e44b9.water.jpg_250x250_05b76363.jpg" alt="" class="re6">
          <div class="re7">西部长青旅游度假区</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
        <li class="re5">
          <img src="https://imgs.qunarzz.com/sight/p0/1408/19/15a301005c9f3d0ec71fcfd7483bb304.jpg_250x250_35b545fe.jpg" alt="" class="re6">
          <div class="re7">黄金寨原生态旅游区</div>
          <div class="re8"><span class="re88">$</span>84<span class="re9">起</span></div>
        </li>
      </ul>
    </div>
    <div class="cen">
      <div class="cen1">
        <img src="https://imgs.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="" class="cen2">
        <span class="cen3">猜你喜欢</span>
      </div>
      <div class="cenul">
        <ul>
          <li class="cen4" v-for="item1 in recommendList" :key="item1.id">
              <a href="" class="cen5">
                <div class="cen6">
                  <div>
                     <img :src="item1.imgUrl" alt="">
                  </div>
                  <div class="cen7">
                    <img src="https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png" alt="">
                   </div>
                  <span class="cen8">
                    随买随用
                  </span>
                </div>
                <div class="cen9">
                  <div class="cen10">{{item1.title}}</div>
                  <div class="cen11">
                    <span class="xx">
                      ★★★★★
                    </span>
                    <span>{{item1.commentNum}}条评论</span>
                  </div>
                  <div class="cen12">
                    <span class="cen13">$</span>
                    <span class="cen14">{{item1.price}}</span>
                    <span class="cen15">起</span>
                    <span class="cen16">{{item1.address}}</span>
                  </div>
                  <div class="cen17">{{item1.detail}}</div>
                </div>
              </a>
          </li>
        </ul>
        <a href="" class="cen18">查看所有产品</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
.re
  margin-top: .2rem;
  width 100%
.re1
  position relative
  width 100%
  padding: .24rem 0 .26rem;
.re1 img
  width: .3rem;
  height: .3rem;
  margin-left: .2rem;
  display inline-block
.re2
  display: inline-block;
  margin-left: .08rem;
  height: .44rem;
  color: #212121;
  font-size: .32rem;
  line-height: .44rem;
.re3
  position: absolute;
  top: .36rem;
  right: .32rem;
  color: #616161;
  font-size: .24rem;
  line-height: .28rem;
.re4
  padding: 0 .24rem;
.re4 ul
  padding: 0 .24rem;
  overflow-x: scroll;
  white-space: nowrap;
.re5
  position: relative;
  display: inline-block;
  padding: .06rem 0 .2rem;
  width: 2rem;
  margin-left: .12rem;
  overflow hidden
.re6
  width: 100%;
.re7
  margin-top: .12rem;
  color: #212121;
  font-size: .24rem;
  line-height: .32rem;
  text-align: center;
  width 100%
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
.re8
  color: #616161;
  font-size: .24rem;
  line-height: .36rem;
  text-align: center;
  font-size: .28rem;
  color: #ff8300 !important;
  width 100%
  text-align center
.re88
  font-size: .24rem;
  line-height: .36rem;
  text-align: center;
.re9
  color: #616161 !important;
  font-size: .24rem;
  line-height: .36rem;
  text-align: center;
.re10
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 overflow: hidden;
 width: .84rem;
 height: .4rem;
.re10 img
  width 100%
.cen
  margin-top: .2rem;
.cen1
  position: relative;
  padding: .24rem 0 .26rem;
.cenul ul
  margin-left: .24rem !important;
.cen2
  display: inline-block;
  width: .3rem;
  height: .3rem;
  margin-left: .2rem;
.cen4
  border-bottom 1px solid #EEEEEE
  position: relative;
  overflow: hidden;
  padding: .2rem 0;
.cen5
  display: block;
  width: 100%;
  height: 100%;
  position relative
.cen6
  float: left;
  overflow: hidden;
  width: 2rem;
  height: 2rem;
.cen6 img
  width: 2rem;
  height: 2rem;
.cen7 img
  position: absolute;
  top: 0rem;
  left: 0;
  width: 1.02rem;
  height: .38rem;
  color: #fff;
.cen7 img
  width: 1.02rem;
  height: .38rem;
.cen8
  display block
  position: absolute;
  top: 0rem;
  left: 0;
  width: 1.02rem;
  height: .38rem;
  background-size: 100%;
  color: #fff;
  font-size: .2rem;
  line-height: .38rem;
.cen9
  overflow: hidden;
  padding-left: .22rem;
.cen10
  margin-top: .26rem;
  height: .44rem;
  color: #212121;
  font-size: .32rem;
  line-height: .44rem;
.cen11
  color: #616161;
  font-size: .24rem;
  line-height: .34rem;
.cen12
  position: relative;
  margin-top: .22rem;
  color: #616161;
  font-size: .24rem;
  line-height: .4rem;
.cen13
  color: #ff8300;
  font-size: .24rem;
  line-height: .4rem;
.cen14
  font-size: .4rem;
  color: #ff8300;
.cen15
  font-size: .24rem;
  line-height: .4rem;
.cen16
  position: absolute;
  right: .24rem;
  bottom: 0;
.cen17
  display:block;
  margin-top: .48rem;
  margin-right: .24rem;
  background: #fff9f9;
  padding: .04rem .1rem;
  color: #f55;
  font-size: .24rem;
  line-height: .34rem;
.cen18
  display: block;
  padding: .2rem 0;
  color: #00afc7;
  font-size: .28rem;
  line-height: .4rem;
  text-align: center;
.b
  color: #212121;
  line-height: 1;
.b1
  height: .8rem;
  padding-left: .26rem;
  line-height: .8rem;
  color: #212121;
.b2
  width 100%
.b2 img
 width 100%
.b3
  padding: .14rem .2rem .2rem .2rem;
.b4
  overflow: hidden;
  padding-right: 1.4rem;
  color: #212121;
  font-size: .28rem;
  line-height: .48rem;
  white-space: nowrap;
  text-overflow: ellipsis;
.b5
  overflow: hidden;
  padding-right: 1.4rem;
  color: #616161;
  font-size: .24rem;
  line-height: .42rem;
  white-space: nowrap;
  text-overflow: ellipsis;
.xx
  color: #ffb436 !important;
  font-size: .28rem;
  letter-spacing: .02rem;
</style>
